<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-0-M/three.js/84/three.js"></script>
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-0-M/vue/2.6.14/vue.js" type="application/javascript">
		</script>
		<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"
			type="application/javascript">
		</script>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.8/layui.js"
			type="application/javascript"></script>
		<style type="text/css">
			div#canvas-frame {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}
		</style>
		<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.6.8/css/layui.min.css" type="text/css"
			rel="stylesheet" />
	</head>

	<body onload="threeStart();">
		<div id="app">
			<div class="layui-row layui-col-space30 layui-anim layui-anim-up" id="demo-box"
				style="margin: 0 auto;width: 400px; max-width: 970px;position:absolute;left:0;top:0;z-index: 9999;"
				v-show="bodyListShow">
				<div class="layui-panel">
					<ul class="layui-menu" id="demo1">
						<li @click="bodyListShow=!bodyListShow">
							<div class="layui-menu-body-title">
								关闭窗口
							</div>
						</li>
						<span id="listMore"></span>
					</ul>
				</div>
			</div>
			<button class="layui-btn layui-btn-primary layui-border-blue" @click="menu=!menu">
				<i class="layui-icon layui-icon-spread-left">
				</i>
			</button>
			<span class="layui-anim layui-anim-up" v-show="menu">
				<span class="layui-btn-group">
					<button onclick="hideGrid()" class="layui-btn">
						{{gridShow?"隐藏":"显示"}}网格
					</button>
					<button @click="bodyListShow=!bodyListShow;" class="layui-btn" onclick="laodingList()">
						查看组
					</button>
					<button onclick="stopMove('x')" class="layui-btn layui-btn-normal">
						{{moveX?"停止":"开始"}}X旋转
					</button>
					<button onclick="stopMove('y')" class="layui-btn layui-btn-normal">
						{{moveY?"停止":"开始"}}Y旋转
					</button>
					<button onclick="stopMove('z')" class="layui-btn layui-btn-normal">
						{{moveZ?"停止":"开始"}}Z旋转
					</button>
				</span>
			</span>
			<div id="canvas-frame">
			</div>
		</div>
		<script src="js/tools.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					gridShow: true,
					moveX: false,
					moveY: false,
					moveZ: false,
					menu: false,
					bodyListShow: false
				}
			})

			var bodyList = {}
			var bodyNode = []
			var renderer, bodyGroup = new THREE.Group();
			var moveX = null
			var moveY = null
			var moveZ = null
			var bollNum=0


			var cube;

			function initLine(bid, isShow = true) {

				this.geometry = new THREE.Geometry();
				this.material = new THREE.LineBasicMaterial({
					vertexColors: true
				});
				this.color1 = new THREE.Color(0x444444);
				this.color2 = new THREE.Color(0xFF0000);

				// 线的材质可以由2点的颜色决定
				this.p1 = new THREE.Vector3(-100, 0, 100);
				this.p2 = new THREE.Vector3(100, 0, -100);
				this.geometry.vertices.push(this.p1);
				this.geometry.vertices.push(this.p2);
				this.geometry.colors.push(this.color1, this.color2);
				this.line = new THREE.Line(this.geometry, this.material, THREE.LinePieces);
				this.line.bid = bid
				bodyList[bid] = this.line
				isShow ? scene.add(line) : null;
			}

			function initBoll(r = 50, se = 20, x = 0, y = 0, z = 0, color, isShow = true) {
				this.radius = r,
					this.segemnt = se,
					this.rings = 160;
				if (color == null) color = 0xFFFFFF
				this.sphereMaterial = new THREE.MeshLambertMaterial({
					color
				});

				this.sphere = new THREE.Mesh(
					new THREE.SphereGeometry(this.radius, this.segemnt, this.rings),
					this.sphereMaterial
				);
				this.sphere.position.x = x;
				this.sphere.position.y = y;
				this.sphere.position.z = z;
				this.sphere.geometry.verticesNeedUpdate = true;
				this.sphere.geometry.normalsNeedUpdate = true;
				this.sphere.bid = "c"+(bollNum++)
				bodyList[this.sphere.bid] = this.sphere
				isShow ? bodyGroup.add(this.sphere) : null;
			}

			function initCeng(c,num) {
				
					if(num==1){
						let x=50+c*40,y=0,z=0
						initBoll(5,20,x,y,z,null,true)
						return
					}
					var R=2/num
					for(var i=0;i<num;i++){
					let x=(50+c*40)*Math.cos(i*R*Math.PI),y=(50+c*40)*Math.sin(i*R*Math.PI),z=0
					initBoll(5,20,x,y,z,null,true)
					}
					
					return
				
			}

			function threeStart() {
				initThree();
				initCamera();
				initScene();
				initLight();
				initLine("l1", false);
				initBoll(40, 30, 0, 0, 0, 0x33CCFF,  false);
				initBoll(5, 25, 90, 0, 0, null,  false);
				groupWork.initGroup("g1", "c0")
				initGrid()

				scene.add(bodyGroup);

				// animationZ()
				// animationY()
				var controls = new THREE.OrbitControls(camera, renderer.domElement);
				controls.addEventListener('change', function() {
					renderer.render(scene, camera)
				});
				renderer.clear();
				renderer.render(scene, camera);
			}







			function showChangeColor(obj) {

				layer.open({
					title: '修改颜色',
					content: `<input type="color" class="layui-btn layui-btn-primary layui-border-blue" style="width:100px" id="setColor">`,
					btn: ['改！', '不改！'],
					yes: function() {
						bodyList[obj].material.color.set(document.getElementById("setColor").value);
						layer.close(layer.index);
					}
				});
			}

			function laodingList() {
				let nodes = document.getElementById("listMore")
				let inner = ""
				for (i of bodyNode) {
					if (i.nodes) {
						inner += `<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
						<div class="layui-menu-body-title">
							组：${i.bid} 
							<i class="layui-icon layui-icon-up">
							</i>
						</div><button>add</button>`
						for (j of i.nodes) {

							inner += `<ul>
										<li>
										<div class="layui-menu-body-title">
									${j}
									<br>
			x:${bodyList[j].getWorldPosition(new THREE.Vector3()).x}<br>
			y:${bodyList[j].getWorldPosition(new THREE.Vector3()).y}<br>
			z:${bodyList[j].getWorldPosition(new THREE.Vector3()).z}<br>
			<button onclick="showChangeColor('${j}')" class="layui-btn-xm layui-btn-primary layui-border-green">设置颜色</button>
								</div>
							</li>
							
						</ul>`

						}
						inner += `</li>`
					} else {

						inner += `<li lay-options="{id: 101}">
						<div class="layui-menu-body-title">
							物体：${i.bid}<br>
x:${bodyList[i.bid]?bodyList[i.bid].getWorldPosition(new THREE.Vector3()).x:"无"}<br>
y:${bodyList[i.bid]?bodyList[i.bid].getWorldPosition(new THREE.Vector3()).y:"无"}<br>
z:${bodyList[i.bid]?bodyList[i.bid].getWorldPosition(new THREE.Vector3()).z:"无"}
						</div>
					</li>`
					}
				}
				document.getElementById("listMore").innerHTML = inner
			}
		</script>
	</body>
</html>
